//横着排
.df {
  display: flex;
}

//横着居中
.jcc {
  justify-content: center;
}

//横着两端对齐
.jcsb {
  justify-content: space-between;
}

//垂直居中
.aic {
  align-items: center;
}

//子元素垂直居中
.asc {
  align-self: center;
}

//可以换行
.fww {
  flex-wrap: wrap;
}

//横着右对齐
.jcfe {
  justify-content: flex-end;
}

.aifs {
  align-items: flex-start;
}

@mixin overflowText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-tradingview-index {
  min-width: 1440px;
  background: #201d36;
  position: relative;
  .scrollbar-track {
    background: #181b2b;
  }
  .scrollbar-thumb.scrollbar-thumb-y {
    background: #25273a;
  } // 259 368 457
  padding: 20px 0;
  .left {
    min-width: 400px;
    width: 400px;
    margin-right: 20px;
    margin-left: 20px;
    // height: 835px;
    .panel-index {
      background: #100f24;
      margin-bottom: 10px;
      .panel-comindex {
        padding: 20px 0 0 0;
        position: relative;
        width: 100%;
        height: 98px;
        .tip {
          position: absolute;
          left: 20px;
          font-weight: 700;
          top: 0;
          bottom: 0;
          .h {
            color: #7160ca;
            font-size: 16px;
          }
          .b {
            color: #29a76c;
            &.down {
              color: #df543a;
            }
          }
        }
      }
    }

    .panel-announce {
      background: #100f24;
      .panel-comannounce {
        width: 100%;
        .hd {
          font-size: 16px;
          color: #f6f3fc;
          height: 48px;
          line-height: 48px;
          padding-left: 20px;
          background: #16132e;
        }
        .bd {
          padding-left: 20px;
          padding-right: 20px;
          height: 441px;
          .i {
            display: block;
            border-bottom: 1px solid #1b1930;
            padding-top: 13px;
            padding-bottom: 13px;
            .h {
              text-align: left;
              font-size: 12px;
              color: #f6f3fc;
              line-height: 18px;
            }
            .b {
              text-align: right;
              font-size: 12px;
              color: #969696;
              height: 18px;
              line-height: 18px;
              margin-top: 5px;
            }
          }
        }
      }
    }

    %panel-table {
      background: black;
      padding-bottom: 12px;
      .hd {
        padding: 0 20px 0 20px;
        width: 100%;
        font-size: 14px;
        color: #f6f3fc;
        font-weight: bold;
        border-bottom: 1px solid #1b1930;
        height: 48px;
        line-height: 48px;
        .i {
          cursor: pointer;
        }
        .l {
          .i {
            font-size: 14px;
            margin-right: 21px;
            color: #727272;
            &.on {
              font-size: 14px;
              color: #7160ca;
              border-bottom: 2px solid #7160ca;
            }
          }
        }
        .r {
          font-size: 12px;
          color: #727272;
          .i {
            margin-left: 25px;
            border-radius: 3px;
            width: 41px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            &.on {
              background: #7160ca;
              color: #dcd3f0;
            }
          }
        }
      }
      .bd {
        padding: 0 20px;
        height: 32px;
        line-height: 32px;
        .i {
          cursor: pointer;
          width: 25%;
          font-size: 12px;
          color: #727272;
        }
      }
      .ft {
        padding: 0 20px;
        .r {
          width: 100%;
          .i {
            font-size: 12px;
            color: #f6f3fc;
            height: 30px;
            line-height: 30px;
            // margin-top: 4px;
            // margin-bottom: 4px;
            width: 25%;
            &.buy {
              font-size: 12px;
              color: #29a76c;
            }
            &.sell {
              font-size: 12px;
              color: #df543a;
            }
            button {
              background: #7160ca;
              border-radius: 2px;
              width: 67px;
              height: 18px;
              border: 0;
              color: #dcd3f0;
              outline: none;
              &:hover {
                opacity: 0.9;
              }
              &:active {
                opacity: 0.6;
              }
            }
          }
        }
      }
    }
    .panel-market {
      border-radius: 8px;
      box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.2);
      margin-bottom: 10px;
      .panel-commarket {
        border-radius: 8px;
        width: calc(100% - 40px); // height: 835px;
        padding: 0 20px;
        .hd {
          font-family: PingFangSC-Medium;
          font-size: 24px;
          color: #333333;
          letter-spacing: -0.58px;
          height: 60px;
          line-height: 60px;
        }
        .bd {
          background: #16132e;
          height: 32px;
          .l {
            font-size: 16px;
            color: #f6f3fc;
            font-weight: 700;
          }
          .r {
          }
        }
        .ft {
          background: #100f24;
          padding-bottom: 10px; // height: 727px;
          .h {
            // padding-left: 15px;
            // padding-right: 15px;
            height: 44px;
            line-height: 44px;
            span {
              display: block;
              width: 30%;
              font-size: 12px;
              color: #727272;
              cursor: pointer;
              text-align: right;
              &:first-child {
                width: 40%;
                text-align: left;
              }
            }
            .arrow {
              height: 0;
              margin-top: -6px;
              .u {
                margin-bottom: -26px;
              }
            }
          }
          .b {
            &.marked {
              .i {
                .l {
                  width: 40%;
                }
                .c {
                  width: 30%;
                }
                .r {
                  width: 30%;
                }
              }
            }
            .i {
              font-family: sans-serif;
              // padding-left: 15px;
              // padding-right: 15px;
              height: 50px;
              line-height: 50px;
              cursor: pointer;
              &.on {
                background: #0f0520;
              }
              .l {
                width: 40%;
                font-size: 12px;
                color: #f6f3fc;
                & > span {
                  margin-right: 5px;
                }
                svg {
                  vertical-align: -2px;
                  cursor: pointer;
                }
              }
              .c {
                width: 30%;
                font-size: 12px;
                color: #f6f3fc;
                text-align: right;
              }
              .r {
                width: 30%;
                font-size: 12px;
                color: #df543a;
                text-align: right;
              }
            }
          }
        }
      }
    }
    .panel-trade {
      border-radius: 8px;
      box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.2);
      .panel-comtrade {
        padding: 0 20px;
        position: relative;
        @extend %panel-table;
        background: #100f24;
        text-align: right;
        margin-top: 20px;
        .hd {
          font-family: PingFangSC-Medium;
          font-size: 24px;
          color: #333333;
          letter-spacing: -0.58px;
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding: 0;
          border: 0;
        }
        .bd {
          height: 44px;
          line-height: 44px;
          border-bottom: 2px solid #a4afd2;
          // margin-bottom: 4px;
          padding: 0;
          .i {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #999999;
            letter-spacing: -0.29px;
            text-align: right;
            width: 33%;
            &:first-child {
              text-align: left;
              width: 20%;
              & + .i {
                width: 40%;
              }
            }
          }
        }
        .ft {
          height: 455px;
          overflow: auto;
          position: relative;
          padding: 0;
          .r {
            .i {
              width: 33%;
              &:first-child {
                text-align: left;
                width: 20%;
                & + .i {
                  width: 40%;
                }
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: calc(100% - 440px);
    .head {
      margin-bottom: 20px;
      width: calc(100% - 20px);
      .panel-price {
        box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.2);
        border-radius: 8px;
        margin-bottom: 20px;
        .panel-comprice {
          background: #100f24;
          position: relative;
          @extend %panel-table;
          text-align: right;
          padding-bottom: 0;
          padding-left: 20px;
          padding-right: 20px;
          .p-buy {
            width: calc((100% - 284px) / 2);
            .hd {
              height: 60px;
              line-height: 60px;
              font-family: PingFangSC-Medium;
              font-size: 24px;
              color: #333333;
              letter-spacing: -0.58px;
              text-align: left;
            }
            .bd {
              border-bottom: 2px solid #a4afd2;
              // padding: 0 10px;
              height: 44px;
              line-height: 44px;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #999999;
              letter-spacing: -0.29px;
              .i {
                width: calc((100% - 40px) / 3);
                &:first-child {
                  text-align: left;
                  width: 40px;
                }
              }
            }
            .ft {
              // height: 376px;
              min-height: 255px;
              overflow: hidden;
              // padding: 0 10px;
              .r {
                cursor: pointer;
                position: relative;
                margin: 5px 0;
                line-height: 20px;
                .i {
                  position: relative;
                  z-index: 2;
                  margin: 0;
                  width: calc((100% - 40px) / 3); // @include overflowText;
                  font-family: PingFangSC-Regular;
                  font-size: 12px;
                  color: #333333;
                  letter-spacing: -0.29px;
                  &:first-child {
                    text-align: left;
                    width: 40px;
                  }
                  &.total {
                    border-radius: 2px;
                    height: 20px;
                    line-height: 20px;
                    text-align: right;
                  }
                  &.buy {
                    color: #29a76c;
                  }
                }
                .bar {
                  background: #1f2931;
                  position: absolute;
                  right: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .p-sell {
            width: calc((100% - 284px) / 2);
            .hd {
              height: 60px;
            }
            .bd {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #999999;
              letter-spacing: -0.29px;
              border-bottom: 2px solid #a4afd2;
              // padding: 0 10px;
              height: 44px;
              line-height: 44px;
              .i {
                width: calc((100% - 40px) / 3);
                text-align: left;
                &:last-child {
                  text-align: right;
                  width: 40px;
                }
              }
            }
            .ft {
              // height: 368px;
              min-height: 255px;
              overflow: hidden;
              // padding: 0 10px;

              &.notOverFlow {
                display: flex;
                .scroll-content {
                  width: 100%;
                  align-self: flex-end;
                }
              }
              .r {
                line-height: 20px;
                cursor: pointer;
                position: relative;
                margin: 5px 0; // transform: rotate(-180deg);
                text-align: left;
                .i {
                  font-family: PingFangSC-Regular;
                  font-size: 12px;
                  color: #333333;
                  letter-spacing: -0.29px;
                  font-size: 12px;
                  position: relative;
                  z-index: 2;
                  margin: 0;
                  width: calc((100% - 40px) / 3);

                  &.total {
                    border-radius: 2px;
                    height: 20px;
                    line-height: 20px;
                    text-align: left;
                  }
                  &.sell {
                    color: #df543a;
                    width: 40px;
                    text-align: right;
                  }
                }
                .bar {
                  background: #2a2030;
                  position: absolute;
                  right: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .p-filter {
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: #6d6a7b;
            cursor: pointer;
            .on {
              opacity: 0.7;
            }
            .l {
              margin-right: 44px;
              position: relative;
            }
            .r {
              position: relative;
            }
          }
        }
      }
      min-width: 762px;
      .panel-tv {
        box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.2);
        border-radius: 8px;
        margin-bottom: 20px;
        .panel-comtv {
        }
      }
      .panel-exchange {
        width: 100%;
        background: black;
        .panel-comexchange {
          padding: 66px 30px 34px 30px;

          background: #100f24;
          %hd {
            width: 100%;
            font-size: 14px;
            color: #f6f3fc;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #1b1930;
            .r {
              font-size: 14px;
              color: #7160ca;
            }
          }
          %bd {
            .i {
              margin-bottom: 1px;
              .h {
                font-size: 14px;
                height: 14px;
                line-height: 14px;
                color: #727272;
                margin-bottom: 10px;
                margin-top: 20px;
                text-align: left;
              }
              .b {
                position: relative;
                input {
                  width: calc(100% - 16px);
                  height: 40px;
                  outline: none;
                  line-height: 40px;
                  font-size: 16px;
                  color: #f6f3fc;
                  background: #16132e;
                  border: 0;
                  padding-left: 15px;
                  border-radius: 2px;
                  text-align: left;
                }
                span {
                  position: absolute;
                  right: 15px;
                  top: 0px;
                  font-size: 16px;
                  color: #727272;
                  height: 40px;
                  line-height: 40px;
                }
              }
            }
          }
          %ft {
            .h {
            }
            .b {
              font-size: 16px;
              color: #f6f3fc;
            }
            .f {
              button {
                opacity: 0.8;
                background: #29a76c;
                border-radius: 2px;
                width: 100%;
                height: 41px;
                line-height: 41px;
                font-size: 16px;
                color: #ffffff;
                border: 0;
                outline: none;
                cursor: pointer;
                &:hover {
                  opacity: 0.7;
                }
                &:active {
                  opacity: 0.5;
                }
                &.disabled {
                  opacity: 0.2;
                  cursor: not-allowed;
                }
              }
            }
          }
          .panel-comexchangebuy {
            .hd {
              @extend %hd;
            }
            .bd {
              @extend %bd;
            }
            .ft {
              @extend %ft;
              .b {
                // border-bottom: 1px solid #a4afd2;
                // margin-bottom: 20px;
              }
            }
          }
          .panel-comexchangesale {
            .hd {
              @extend %hd;
            }
            .bd {
              @extend %bd;
            }
            .ft {
              @extend %ft;
              .b {
                // border-bottom: 1px solid #a4afd2;
                // margin-bottom: 20px;
              }
              .f {
                button {
                  background: #df543a;
                }
              }
            }
          }
        }
      }
    }
    .body {
      box-shadow: 0 0 5px 0 rgba(51, 51, 51, 0.2);
      border-radius: 8px;
      width: calc(100% - 20px);
      min-width: 762px;
      .panel-order {
        width: 100%;
        .panel-comorder {
          &.active {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }

          &.history {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
          }
          position: relative;
          padding: 0 20px;
          .hd {
            width: 100%;
            font-size: 14px;
            color: #999;
            font-weight: bold;
            border-bottom: 1px solid #1b1930;
            background: #16132e;
            .i {
              cursor: pointer;
            }
            .l {
              .i {
                font-size: 14px;
                color: #727272;
                font-family: PingFangSC-Medium;
                font-size: 24px;
                color: #333333;
                letter-spacing: -0.58px;
                height: 60px;
                line-height: 60px;
              }
            }
            .r {
              margin-right: 20px;
              font-size: 12px;
              color: #727272;
              background: #f8f9ff;
              height: 20px;
              width: 140px;
              padding-left: 1px;
              padding-right: 14px;
              padding-top: 2px;
              padding-bottom: 2px;
              border-radius: 4px;
              .i {
                border-radius: 3px;
                width: 41px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                &.on {
                  background: #7160ca;
                  color: #dcd3f0;
                }
              }
            }
          }
          .bd {
            background: #100f24;
            height: 44px;
            line-height: 44px;
            border-bottom: 2px solid #a4afd2;
            .i {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #999999;
              letter-spacing: -0.29px;
              text-align: left;
              width: calc(100% / 7);
              &.date {
                // width: 15.5%;
                text-align: left;
              }
              &.type {
                // width: 9.5%;
              }
            }
          }
          .ft {
            background: #100f24;
            // padding: 0 20px;
            height: 301px;
            .r {
              width: 100%;

              .i {
                font-size: 12px;
                color: #f6f3fc;
                height: 30px;
                line-height: 30px;
                // margin-top: 4px;
                // margin-bottom: 4px;
                width: calc(100% / 7);
                &.date {
                  // width: 15.5%;
                }
                &.type {
                  // width: 9.5%;
                }
                &.buy {
                  font-size: 12px;
                  color: #29a76c;
                }
                &.sell {
                  font-size: 12px;
                  color: #df543a;
                }
                button {
                  background: #7160ca;
                  border-radius: 2px;
                  width: 67px;
                  height: 18px;
                  border: 0;
                  color: #dcd3f0;
                  outline: none;
                  &:hover {
                    opacity: 0.9;
                  }
                  &:active {
                    opacity: 0.6;
                  }
                  &.disabled {
                    opacity: 0.2;
                    cursor: not-allowed;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  &.light {
    .scrollbar-track {
      background: #fff;
    }
    .scrollbar-thumb.scrollbar-thumb-y {
      background: #eef1f9;
    }
    background: #faf9fd;
    .left {
      .panel-index {
        background: #ffffff;
        .panel-comindex {
          .tip {
            .h {
              color: #7160ca;
            }
            .b {
              color: #29a76c;
              &.down {
                color: #df543a;
              }
            }
          }
        }
      }

      .panel-announce {
        background: #fff;
        .panel-comannounce {
          .hd {
            color: #354989;
            background: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(48, 34, 85, 0.08);
          }
          .bd {
            .i {
              border-bottom: 1px solid #f5f6f9;
              font-size: 12px;
              color: #b7bcd1;
              text-align: right;
              .h {
                color: #354989;
              }
              .b {
                color: #b7bcd1;
              }
            }
          }
        }
      }

      %panel-table {
        background: black;
        .hd {
          color: #f6f3fc;
          border-bottom: 1px solid #1b1930;
          .l {
            .i {
              color: #727272;
              &.on {
                color: #7160ca;
                border-bottom: 2px solid #7160ca;
              }
            }
          }
          .r {
            color: #727272;
            .i {
              &.on {
                background: #7160ca;
                color: #dcd3f0;
              }
            }
          }
        }
        .bd {
          .i {
            color: #727272;
          }
        }
        .ft {
          .r {
            .i {
              color: #f6f3fc;
              &.buy {
                color: #29a76c;
              }
              &.sell {
                color: #df543a;
              }
              button {
                background: #7160ca;
                color: #dcd3f0;
                &:hover {
                  opacity: 0.9;
                }
                &:active {
                  opacity: 0.6;
                }
              }
            }
          }
        }
      }
      .panel-market {
        margin-bottom: 0; // height: 100%;
        position: relative;
        .panel-commarket {
          background: #fff;
          .hd {
          }
          .bd {
            background: #fff;
            .l {
              color: #333;
            }
            .r {
              input {
                border: 1px solid #ededef;
              }
              .search {
              }
            }
          }
          .ft {
            background: #fff;
            .h {
              border-bottom: 2px solid #a4afd2;
              span {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #999999;
                letter-spacing: -0.29px;
              }
              .arrow {
                svg {
                  fill: #7d86ac !important;
                }
                .u {
                }
              }
            }
            .b {
              height: 309px;
              .i {
                &:hover {
                  background: #f4f5f7;
                }
                &.on {
                  background: #e9ecf2;
                }
                .l {
                  color: #333;
                  font-weight: bold;
                  svg {
                    fill: #7d86ac !important;
                  }
                }
                .c {
                  color: #333;
                }
                .r {
                  color: #df543a;
                }
              }
            }
          }
        }
      }
      .panel-trade {
        .panel-comtrade {
          @extend %panel-table;
          background: #fff;
          border-radius: 8px;
          padding-bottom: 21px;
          .hd {
            font-size: 24px;
            color: #333333;
            letter-spacing: -0.58px;
            border: 0;
          }
          .bd {
            border-bottom: 2px solid #a4afd2;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #999999;
            letter-spacing: -0.29px;
            .i {
              color: #7d86ac;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #999999;
              letter-spacing: -0.29px;
              text-align: right;
              &:first-child {
                text-align: left;
              }
            }
          }
          .ft {
            padding: 0;
            .r {
              .i {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #333333;
                letter-spacing: -0.29px;
                &:first-child {
                  // color: #727272;
                }
              }
            }
          }
        }
      }
    }
    .right {
      .head {
        .panel-price {
          .panel-comprice {
            background: #fff;
            @extend %panel-table;
            border-radius: 8px;
            padding-bottom: 0;
            .p-buy {
              .bd {
              }
              .ft {
                .r {
                  &:hover {
                    background: #f8f9ff;
                  }
                  .i {
                    color: #354989;
                    &.total {
                    }
                    &.buy {
                      color: #00a45b;
                    }
                    &.buy-price {
                      color: #00a45b;
                    }
                  }
                  .bar {
                    background: rgba(41, 167, 108, 0.25);
                  }
                }
              }
            }
            .p-sell {
              .bd {
              }
              .ft {
                .r {
                  &:hover {
                    background: #f8f9ff;
                  }
                  .i {
                    color: #354989;
                    &.total {
                    }
                    &.sell {
                      color: #df6c4f;
                    }
                    &.sell-price {
                      color: #df6c4f;
                    }
                  }
                  .bar {
                    background: rgba(223, 84, 58, 0.25);
                  }
                }
              }
            }
            .p-filter {
              color: #6aa0ff;
              svg {
                fill: #6aa0ff !important;
              }
              .panel-compricefilter {
                box-shadow: 0 2px 6px 0 rgba(35, 55, 89, 0.08);
                .i {
                  &.on {
                    opacity: 1;
                    span {
                      background: #f8f9ff;
                    }
                  }
                  span {
                    display: block;
                    background: #fff;
                    color: #6aa0ff;
                  }
                }
              }
            }
          }
        }
        .panel-tv {
          border: none;
          background: #fff;
          padding: 8px;
          border-radius: 8px;
        }
        .panel-exchange {
          width: 284px;
          background: #fff;
          .panel-comexchange {
            .tab {
              button {
                width: 102px;
                background: #4c505d;
                border-radius: 4px;
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #ffffff;

                &.buy {
                  background: #00a45b;
                }
                &.sell {
                  background: #df6c4f;
                }
              }
            }
            background: #fff;
            %hd {
              border-bottom: 1px solid #f5f6f9;
              color: #354989;
              .r {
                a {
                  font-size: 14px;
                  color: #5693ff;
                }
                span {
                  font-size: 14px;
                  color: #5693ff;
                  outline: none;
                  cursor: pointer;
                }
              }
            }
            %bd {
              .i {
                .h {
                  color: #7d86ac;
                }
                .b {
                  position: relative;
                  input {
                    color: #354989;
                    background: #fff;
                    border-bottom: 1px solid #a4afd2;
                  }
                  span {
                    color: #7d86ac;
                  }
                }
              }
            }
            %ft {
              .h {
              }
              .b {
                // word-break: break-all;
                // color: #354989;
                // padding-bottom: 1px;
                span {
                  color: #999;
                  display: block;
                  &:first-child {
                    width: 64px;
                    text-align: left;
                  }
                }
                font {
                  color: #333;
                }
                input {
                  border: 0;
                  font-size: 16px;
                  outline: none;
                  width: calc(100% - 100px);
                  color: #333;
                  text-align: right;
                }
              }
              .f {
                button {
                  background: #00a45b;
                  border-radius: 4px;
                  color: #ffffff;
                  &:hover {
                  }
                  &:active {
                  }
                  &.disabled {
                    opacity: 0.2;
                    cursor: not-allowed;
                  }
                }
              }
              .panel-comslider {
                .line {
                  background: #f9f8fe;
                }
                .dot {
                  .i {
                    background: #f7f5fd;
                    &.on {
                      background: #5693ff;
                    }
                  }
                }
                .thumb {
                  width: 14px;
                  height: 14px;
                  border-radius: 14px;
                  background: #5693ff;
                  border: 2px solid #ffffff;
                  bottom: -1px;
                }
                .progress {
                  opacity: 0.5;
                  background: #5693ff;
                }
              }
            }
            .panel-comexchangebuy {
              .hd {
                @extend %hd;
              }
              .bd {
                @extend %bd;
              }
              .ft {
                @extend %ft;
              }
            }
            .panel-comexchangesale {
              .hd {
                @extend %hd;
              }
              .bd {
                @extend %bd;
              }
              .ft {
                @extend %ft;
                .f {
                  button {
                    background: #df543a;
                  }
                }
              }
            }
          }
        }
      }
      .body {
        margin-top: 3px;
        .panel-order {
          .panel-comorder {
            background: #fff;
            .hd {
              color: #f6f3fc;
              border: 0;
              background: #fff;
              .l {
                .i {
                  color: #333333;
                }
              }
              .r {
                color: #999;
                .i {
                  &.on {
                    color: #fff;
                    opacity: 0.8;
                    background: #116ceb;
                    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.03);
                    border-radius: 3px;
                  }
                }
              }
            }
            .bd {
              background: #fff;
              border-bottom: 2px solid #a4afd2;
              .i {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #999999;
                letter-spacing: -0.29px;
                text-align: left;
                &.date {
                  text-align: left;
                }
                &:last-child {
                  text-align: right;
                }
              }
            }
            .ft {
              background: #fff;
              .r {
                .i {
                  font-family: PingFangSC-Regular;
                  font-size: 12px;
                  color: #333333;
                  letter-spacing: -0.29px;
                  &.buy {
                    color: #00a45b;
                  }
                  &.sell {
                    color: #df6c4f;
                  }
                  &:last-child {
                    text-align: right;
                  }
                  button {
                    background: #5693ff;
                    border-radius: 2px;
                    cursor: pointer;
                    color: #fff;
                    &:hover {
                      opacity: 0.9;
                    }
                    &:active {
                      opacity: 0.6;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  } // 创业板
  &.trades {
    .right {
      .panel-announce {
        background: #100f24;
        display: none;
        .panel-comannounce {
          width: 100%;
        }
      }
    }
  }
}
